<template>
    <div class="star">
      <span class="star-item on" v-for="item in onstar" v-show="onstar>0"></span>
      <span class="star-item half" v-show="halfstar"></span>
      <span class="star-item off" v-for="item in offstar" v-show="offstar>0"></span>
    </div>
</template>

<script>
    export default {
      name: "star",
      props: {
        score: {
          type: Number,
          default: 0
        }
      },
      data () {
        return {
          onstar: 0,
          offstar: 0,
          halfstar: 0
        }
      },
      mounted () {
        this._calculateScore()
      },
      methods: {
        _calculateScore () {
          this.onstar = Math.floor(this.score)
          this.halfstar = (parseInt(this.score.toString().split(".")[1])>=5)?true:false
          // console.log('sc: '+this.onstar+this.halfstar)
          let preoff = (5-this.score).toString().split(".")[0]
          let nextoff = ((5-this.score).toString().split(".")[1]<=5)?0:1
          // console.log(nextoff+'p'+preoff)
          this.offstar = parseInt(preoff)+parseInt(nextoff)
          // console.log('off'+this.offstar)
        }
      },
      watch: {
        score (newval) {

        }
      }
    }
</script>

<style scoped>
  .star{
    display: flex;
    height: 100%;
    align-items: center;
  }
  .star .star-item{
    margin-right: 6px;/*rem*/
    height: 20px;
    width: 20px;
    background-size: 100% 100%;
    background-position: center center;
  }
  .star .on{
    background-image: url("../../../../static/img/star/star48_on@2x.png");
  }
  .star .off{
    background-image: url("../../../../static/img/star/star48_off@2x.png");
  }
  .star .half{
    background-image: url("../../../../static/img/star/star36_half@2x.png");
  }
</style>
